import React, { useEffect, useState } from "react";
import { useLocation } from "@umijs/max";
import {  Descriptions, Table, Image, Button, Space } from "antd";
import XlTableDictColumn from "@/components/Table/XlTableDictColumn";
import { companyIsPersonal, isTicketSettlement } from "@/utils/dictUtil";
import { fetchCompanyDetail } from "../services";
import { downloadFile } from "@/utils/util";
import CapitalFlow from "../modals/CapitalFlow";

const CompanyDetail = () => {
  const location = useLocation();
  const [detail, setDetail] = useState({});
  const searchParams = new URLSearchParams(location.search);
  const id = searchParams.get('id');

  const [moneyVisible, setMoneyVisible] = useState(false);

  const capitalFlowProps = {
    title: "资金流水",
    visible: moneyVisible,
    currentRow: detail,
    onCancel: () => {
      setMoneyVisible(false);
    }
  }

  const handleView = () => {
    setMoneyVisible(true);
  }

  const fetchCompanyDetailApi = async (id) => {
    const res = await fetchCompanyDetail({id});
    setDetail(res || {});
  }

  const fields1 = [
    {
      label: '公司简称',
      value: 'nickName'
    },
    {
      label: '客户编码',
      value: 'code'
    },
    {
      label: '认证状态',
      value: 'checkStatus',
      render: (record) => <XlTableDictColumn type="customerCheckStatus" value={record?.checkStatus} />
    },
    {
      label: '合作状态',
      value: 'cooperationStatus',
      render: (record) => <XlTableDictColumn type="cooperationStatus" value={record?.cooperationStatus} />
    },
    {
      label: '类型',
      value: 'type',
      render: (record) => <XlTableDictColumn type="companyType" value={record?.type} />
    },
    {
      label: '属性',
      value: 'category',
      render: (record) => <XlTableDictColumn type="customerAttr" value={record?.category} />
    },
    {
      label: '所属销售',
      value: 'salesName'
    },
  ]

  const fields2 = [
    {
      label: '联系人',
      value: 'contacts'
    },
    {
      label: '电话',
      value: 'mobile'
    },
    {
      label: '结算方式',
      value: 'settlementMethod',
      render: (record) => <XlTableDictColumn type="settlement" value={record?.settlementMethod} />
    },
    {
      label: '付款时间',
      value: 'payTime',
      render: (record) => {
        if (isTicketSettlement(record?.settlementMethod)) {
          return <span>{record?.payNodeText}</span>
        }
        return <span><XlTableDictColumn type="payTime" value={record?.payMonth} /> {record?.payDay}</span>
      }
    },
    {
      label: '公司全称',
      value: 'fullName'
    },
    {
      label: companyIsPersonal(detail?.type) ? '身份证号' : '统一信用代码',
      value: 'identification'
    },
    {
      label: '公司地址',
      value: 'address',
      render: (record) => {
        return [record?.province, record?.city, record?.area, record?.address].join('');
      }
    },
    {
      label: '账户资金',
      value: 'amount',
      render: (record) => {
        return <span onClick={handleView} style={{textDecoration: "underline", color: "#02A7F0", cursor: "pointer"}}>{record?.balanceAmount || 0}</span>;
      }
    },
  ];

  const columns = [
    {
      title: '主账户',
      dataIndex: 'isMain',
      render: (_, record) => <XlTableDictColumn type="yesOrNo" value={record?.isMain} />
    },
    {
      title: '电话',
      dataIndex: 'mobile'
    },
    {
      title: '姓名',
      dataIndex: 'name'
    },
    {
      title: '录入时间',
      dataIndex: 'createTime'
    },
  ];

  const contract = detail?.attachments?.filter(v => String(v.category) === '1');
  const idInfo = detail?.attachments?.filter(v => String(v.category) === '2');

  useEffect(() => {
    if (id && location.pathname === '/company-manage/company-deatil') {
      fetchCompanyDetailApi(id) 
    }
  }, [location.search])

  return (
    <div>
      <div style={{background: 'rgba(242, 242, 242, 1)', padding: '16px 30px 0 30px'}}>
        <Descriptions column={fields1.length} >
          {
            fields1?.map(v => {
              if (v?.render) {
                return <Descriptions.Item key={v.label} label={<strong>{v.label}</strong>}><strong>{v?.render(detail)}</strong></Descriptions.Item>;
              }
              return <Descriptions.Item key={v.label} label={<strong>{v.label}</strong>}><strong>{detail?.[v.value]}</strong></Descriptions.Item>;
            })
          }
        </Descriptions>
      </div>
      <div style={{padding: '30px'}}>
        <Descriptions column={2}>
          {
            fields2?.map(v => {
              if (v?.render) {
                return <Descriptions.Item key={v.label} label={<strong>{v.label}</strong>}><strong>{v?.render(detail)}</strong></Descriptions.Item>;
              }
              return <Descriptions.Item key={v.label} label={<strong>{v.label}</strong>}><strong>{detail?.[v.value]}</strong></Descriptions.Item>;
            })
          }
        </Descriptions>
      </div>
      <div style={{marginTop: 30}}>
        <strong>可下单手机</strong>
        <Table
          style={{marginTop: 10}} 
          bordered
          columns={columns}
          dataSource={detail?.staffsList || []}
        />
      </div>
      {
        contract && (
          <div style={{padding: '30px'}}>
            <Descriptions column={1}>
              <Descriptions.Item label={<strong>合同文件</strong>}><strong><Button type="link" onClick={() => downloadFile(contract?.url)}>{contract?.name}</Button></strong></Descriptions.Item>
            </Descriptions>
          </div>
        )
      }
      {
        idInfo?.length > 0 && (
          <div style={{marginTop: 30, marginBottom: 30}}>
            <strong>{companyIsPersonal(detail?.type) ? '身份证照片' : '营业执照'}</strong>
            <Space style={{marginTop: 10, paddingLeft: 30}}>
              {
                idInfo?.map(v => (
                  <Image src={v?.url} key={v.url} width={300} height={200} />
                ))
              }
            </Space>
          </div>
        )
      }
      {moneyVisible && <CapitalFlow {...capitalFlowProps} />}
    </div>
  );
}
export default CompanyDetail;